<!--
  @Description: 头部layout
  @author: Linh
  @date: 2023-01-05 14:51:03
-->
<template>
  <div class="container">
    <!--    返回列表页按钮-->
    <n-button title="返回列表页" :disabled="router.currentRoute.value.path === '/'" quaternary class="back" @click="back">
      <template #icon>
        <i class="iconfont icon-fanhui back-icon"></i>
      </template>
    </n-button>
    <!--    标题-->
    <div class="title">可视化大屏设计111器</div>
    <n-divider vertical />
    <!--    当前页面标题-->
    <div class="sub-title">{{ router.currentRoute.value.meta.pageName }}</div>
    <!-- 另一侧其他信息 -->
    <div class="info">Linh <n-divider vertical /> Jiang</div>
  </div>
</template>

<script setup lang="ts">
import html2canvas from "html2canvas";
import { useRouter, useRoute } from "vue-router";
import { useCommonStore } from "@/store/modules/common";
const router = useRouter();
const route = useRoute();
const useStore = useCommonStore();
/**
 * 返回项目列表首页
 */
const back = () => {
  saveImage();
  router.push("/");
};

const saveImage = () => {
  // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
  const id = JSON.parse(JSON.stringify(route.query.id));
  const dom: any = window.document.getElementById(route.query.id == "2" ? "map" : "layout");
  if (!dom) {
    return;
  }

  html2canvas(dom, {
    backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
    useCORS: true, //支持图片跨域
    scale: 1, //设置放大的倍数
  }).then((canvas) => {
    // 把生成的base64位图片上传到服务器,生成在线图片地址
    let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
    const images = JSON.parse(JSON.stringify(useStore.imagesList));
    images[id] = url;
    useStore.updateImages(images);
  });
};
</script>

<style scoped lang="scss">
.container {
  height: 5vh;
  display: flex;
  align-items: center;
  border-bottom: 1px solid lightgray;
  box-shadow: 2px 2px 5px lightgray;

  .back {
    margin: 0 10px;

    &-icon {
      font-weight: bold;
    }
  }

  .title {
    font-size: 16px;
    font-weight: bold;
  }

  .sub-title {
    font-size: 12px;
    color: gray;
  }

  .info {
    flex: 1;
    text-align: end;
    padding-right: 20px;
    font-size: 12px;
    color: grey;
  }
}
</style>
